<template>
  <div>
    <div class="top-2">
      <my-header-2></my-header-2>
    </div>
    <div class="top-1">
      <my-header-1></my-header-1>
    </div>



    <div class="tab">
      <p>
        <router-link to="/videolist/tuijian">推荐</router-link>
      </p>
      <p>
        <router-link to="/videolist/hotvideo">热片解读</router-link>
      </p>
      <p>
        <router-link to="/videolist/newvideo">新片预告</router-link>
      </p>
      <p>
        <router-link to="/videolist/fastvideo">速看电影</router-link>
      </p>
      <p>
        <router-link to="/videolist/showvideo">剧集综艺</router-link>
      </p>
    </div>


    <router-view></router-view>

  </div>


</template>

<script>
import MyHeader1 from "../../components/MyHeader1.vue";
import MyHeader2 from "../../components/MyHeader2.vue";

export default {
  name: "VideoView",
  components: {
    MyHeader2,
    MyHeader1,
  },
};
</script>

<style lang="less" scoped>
ul,
li {
  list-style: none;
}
.top-1 {
  width: 100%;
}

.top-2 {
  width: 100%;
}
.tab {
  width: 100%;
  height: 1.173333rem;
  display: flex;
  font-size: 0.4rem;
  align-items: center;
  background: #fff;
  position: fixed;
      white-space: nowrap;
  overflow: scroll;
  border-top: 1px solid #e6e6e6;
  // flex-wrap: nowrap;
  top: 111px;
  z-index: 10;
}
.tab::-webkit-scrollbar {
  display: none;
}
p{
  margin-left: .6667rem;
}
.tab a {
  font-size: .4rem;
  font-weight: 500;
  color: #333;
  display: inline-block;
  position: relative;
  display: block;
}

.tab a.router-link-active {
  font-size: .4533rem;
}

.tab a.router-link-active::after {
  content: "";
  display: inline-block;
  width: 60%;
  height: .04rem;
  background: #f03d37;
  position: absolute;
  left: 23%;
  bottom: -0.1333rem;
  font-weight: 700;
  color: #f03d37;
  border-radius: 0.08rem;
}
a {
  color: #696969;
}
</style>